<template>
	<view>
		<ttBar leftIcon="icon-back" title="支付订单"></ttBar>
		<view class="priceBox">
			<text>￥{{orderData.payAmount.toFixed(2)}}</text>
		</view>
		<view class="payBox" :style="{'height':hg+'px'}">
			<text class="title">请选择支付方式</text>
			<view class="typeRow">
				<block v-for="(item,index) in payList" :key="index">
					<view v-if="item=='wxpay' && isIstWx" class="row" @tap="selectType" :data-type="item">
						<image src="../../static/wxpay.png"></image>
						<view class="payInfo">
							<text>微信支付</text>
							<text>亿万用户的选择，更快更安全</text>
						</view>
						<text class="iconfont" :class="[payType=='wxpay'?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']"></text>
					</view>
					<view v-else-if="item=='alipay'" class="row" @tap="selectType" :data-type="item">
						<image src="../../static/alipay.png"></image>
						<view class="payInfo">
							<text>支付宝</text>
							<text>支付宝安全支付</text>
						</view>
						<text class="iconfont " :class="[payType=='alipay'?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']"></text>
					</view>
				</block>


			</view>
			<button class="payBtn" @tap="getOrderSign">确认支付</button>
		</view>
		<hk-modal ref="hkModal"></hk-modal>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	export default {
		components: {
			ttBar
		},
		data() {
			return {
				hg: uni.getSystemInfoSync().screenHeight - uni.upx2px(354),
				payType: 'wxpay',
				orderData: {
					payAmount: 0
				},
				payList: [],
				oldType: null,
				isIstWx:false
			};
		},
		methods: {
			checkInstall() {
				// #ifdef APP-PLUS
				if (plus.runtime.isApplicationExist({
						pname: 'com.tencent.mm',
						action: 'weixin://'
					})) {
					this.isIstWx = true;
				}
				// #endif
			},
			selectType(e) {
				this.payType = e.currentTarget.dataset.type
			},
			getData(_id) {

				this.$store.dispatch('apiGetOrderDt', {
					orderNo: _id
				}).then(res => {
					this.orderData = res.data.data
				})
			},
			getArrData(_arr) {
				let r = _arr.split(",");
				let n = 0;
				r.forEach((x) => {
					this.$store.dispatch('apiGetOrderDt', {
						orderNo: x
					}).then(res => {

					})
				})
			},
			getOrderSign() {
				this.$store.dispatch("apiGetOrderSign", {
					orderNo: this.orderData.orderNo,
					payType: this.payType
				}).then(res => {
					this.payOrder(res.data);
				})
			},
			getPayType() {
				this.$store.dispatch("uniGetPayProvider")
					.then(payServer => {
						if (this.oldType == 1) {
							this.payType = "wxpay";
							this.payList = ['wxpay']
						} else if (this.oldType == 2) {
							this.payType = "alipay";
							this.payList = ['alipay']
						} else {
							this.payList = payServer.provider
						}
					})
			},
			payOrder(res) {
				if (this.payType == 'wxpay') { //微信支付
					let obj = {
						appid: res.appid,
						noncestr: res.noncestr,
						package: res.package, // 固定值，以微信支付文档为主  
						partnerid: res.partnerid,
						prepayid: res.prepayid,
						timestamp: res.timestamp,
						sign: res.sign
					}
					let orderInfo = JSON.stringify(obj);
					console.log(orderInfo);
					uni.requestPayment({
						provider: 'wxpay',
						orderInfo: orderInfo,
						success: (rst) => {
							console.log(rst);
							this.$store.dispatch("checkActionReporo").then(()=>{
								this.$store.dispatch("getToken").then(()=>{
									this.$store.dispatch("reportAction",{
										acType:'PURCHASE',
										chaseValue:parseInt(this.orderData.payAmount*100) 
									})
									
								})
							})
							uni.redirectTo({
								url: '/pages/payResult/payResult?id=' + this.orderData.orderNo
							})

						},
						fail: (err) => {
							if (err.errMsg.indexOf('canceled') > -1) {
								// this.$refs.hkModal.init({
								// 	title:'支付失败',
								// 	cntText:'用户取消了订单支付',
								// 	cancle:''
								// })
								// this.$refs.hkModal.show()
							} else {
								this.$refs.hkModal.init({
									title: '支付失败',
									cntText: '支付失败，请稍后再试,' + err.errMsg,
									cancle: ''
								})
								this.$refs.hkModal.show()
							}
						}
					});
				} else { //支付宝
					// console.log(res.order_info);
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: res.order_info,
						success: (rst) => {
							this.$store.dispatch("checkActionReporo").then(()=>{
								this.$store.dispatch("getToken").then(()=>{
									this.$store.dispatch("reportAction",{
										acType:'PURCHASE',
										chaseValue:parseInt(this.orderData.payAmount*100) 
									})
									
								})
							})
							uni.redirectTo({
								url: '/pages/payResult/payResult?id=' + this.orderData.orderNo
							})
						},
						fail: (err) => {
							console.log(err);
							if (err.errMsg.indexOf("取消") > -1) {
								// this.$refs.hkModal.init({
								// 	title:'支付失败',
								// 	cntText:'支付失败，用户中途取消支付操作',
								// 	cancle:''
								// })
								// this.$refs.hkModal.show()
							} else {
								console.log();
								// this.$refs.hkModal.init({
								// 	title: '支付失败',
								// 	cntText: '支付失败，请稍后再试,' + err.errMsg,
								// 	cancle: ''
								// })
								// this.$refs.hkModal.show()
							}

						}
					});
				}

			}
		},
		onLoad(cfm) {
			if (cfm.id) {
				this.getData(cfm.id)
			} else {
				this.getArrData(cfm.idarr)
			}
			this.oldType = parseInt(cfm.paytype);
			this.getPayType();
			this.checkInstall();
		},
		onBackPress(e) {
			let _this = this;
			this.$refs.hkModal.init({
				title: '确认放弃',
				cntText: '是否放弃本次付款？',
				cancle: '放弃',
				confirm: '付款',
				confirmFcn: function() {
					_this.$refs.hkModal.close()
				},
				cancleFcn: function() {
					uni.redirectTo({
						url: '/pages/orderDt/orderDt?id=' + _this.orderData.orderNo
					})
				}

			})
			this.$refs.hkModal.show()

			return true;
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;

	}

	.priceBox {
		height: 210rpx;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		margin: 18upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		display: flex;
		justify-content: center;
		align-items: center;

		text {
			font-size: 60rpx;
			color: #ff3b2b;
		}

		text:first-letter {
			font-size: 40upx;
		}
	}

	.payBox {
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		margin: 18upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		display: flex;
		flex-direction: column;
		position: relative;

		.title {
			padding: 26upx 44upx;
			font-size: 32upx;
		}

		.typeRow {
			display: flex;
			flex-direction: column;
			padding: 0 70upx;

			.row {
				display: flex;
				align-items: center;
				padding: 40upx 0;
				border-bottom: 1px solid #EEEEEE;

				image {
					width: 90upx;
					height: 90upx;
					flex-shrink: 0;
					margin-right: 20upx;
				}

				.payInfo {
					display: flex;
					flex-direction: column;
					font-size: 32upx;
					color: #202932;
					flex-grow: 1;

					text:last-child {
						font-size: 28upx;
						color: #939393;
					}
				}

				.iconfont {
					font-size: 40upx;
					color: #CCCCCC;
				}

				.icon-yuanxingxuanzhongfill {
					color: #ffb11a;
				}
			}
		}

	}

	.payBtn {
		border: none;
		margin: 0;
		background: linear-gradient(to right, #ff7f2a, #ff5a2a);
		color: #FFFFFF;
		font-size: 32upx;
		font-weight: bold;
		height: 84upx;
		border-radius: 42upx;
		// margin: 0 120upx;
		position: absolute;
		bottom: 70upx;
		width: 80%;
		left: 10%;
	}

	.payBtn:after {
		border: none;
	}
</style>
